<template>
  <!-- 上传 -->
  <div>
    <!--上传身份证正面-->
    <div class="uploadDiv">
      <div class="title_div">
        <span><b style="color:red">*</b>上传身份证正面</span>
        <el-upload
          class="upload-demo"
          action=""
          :limit="1"
          :file-list="fileList"
          :on-exceed="proFileExceed"
          :http-request="uploadImg"
          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
        >
          <span>
            <el-button
              size="small"
              class="addpic"
              @click="getOrderNumber(1, 'face')"
              v-if="orderStatus == 0"
              >上传</el-button
            >
          </span>
        </el-upload>
      </div>
      <div
        class="upload_list"
        v-loading="loading1"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :style="{ 'min-height': height1 + 'px' }"
      >
        <ul class="clearfix">
          <li v-for="(item, index) in fileList" :key="item.id">
            <div class="img">
              <el-image
                style="width: 160px; height: 90px"
                :src="item.accessoryShrinkName || item.accessoryUrl"
                fit="cover"
                :lazy="true"
              >
              </el-image>
            </div>
            <p class="name">{{ item.accessoryShowName }}</p>
            <p class="ztc">{{ item.accessorySize }} MB</p>
            <p class="ztc">
              {{ item.accessoryShowName }}由{{ item.upName }}上传
            </p>
            <div class="btn">
              <el-button type="text" @click="reviewPic(item.accessoryUrl)"
                >查看</el-button
              >
              <span>
                <el-popconfirm
                  title="确定删除此数据吗？"
                  @onConfirm="deleteData(item.id, index, fileList, 1, 'face')"
                  v-if="orderStatus == 0"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    size="small"
                    class="deteBtnText"
                    v-if="orderStatus == 0"
                    >删除</el-button
                  >
                </el-popconfirm>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--上传身份证反面-->
    <div class="uploadDiv">
      <div class="title_div">
        <span><b style="color:red">*</b>上传身份证反面面</span>
        <el-upload
          class="upload-demo"
          action=""
          :file-list="fileListBack"
          :limit="1"
          :on-exceed="proFileExceed"
          :http-request="uploadImg"
          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
        >
          <span>
            <el-button
              size="small"
              class="addpic"
              @click="getOrderNumber(1, 'back')"
              v-if="orderStatus == 0"
              >上传</el-button
            >
          </span>
        </el-upload>
      </div>
      <div
        class="upload_list"
        v-loading="loading0"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :style="{ 'min-height': height0 + 'px' }"
      >
        <ul class="clearfix">
          <li v-for="(item, index) in fileListBack" :key="item.id">
            <div class="img">
              <el-image
                style="width: 160px; height: 90px"
                :src="item.accessoryShrinkName || item.accessoryUrl"
                fit="cover"
                :lazy="true"
              >
              </el-image>
            </div>
            <p class="name">{{ item.accessoryShowName }}</p>
            <p class="ztc">{{ item.accessorySize }} MB</p>
            <p class="ztc">
              {{ item.accessoryShowName }}由{{ item.upName }}上传
            </p>
            <div class="btn">
              <el-button type="text" @click="reviewPic(item.accessoryUrl)"
                >查看</el-button
              >
              <span>
                <el-popconfirm
                  title="确定删除此数据吗？"
                  @onConfirm="
                    deleteData(item.id, index, fileListBack, 1, 'back')
                  "
                  v-if="orderStatus == 0"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    size="small"
                    class="deteBtnText"
                    v-if="orderStatus == 0"
                    >删除</el-button
                  >
                </el-popconfirm>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--上传户口本-->
    <div class="uploadDiv">
      <div class="title_div">
        <span>上传户口本</span>
        <el-upload
          class="upload-demo"
          action=""
          :multiple="true"
          :http-request="uploadImg"
          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
        >
          <span>
            <el-button
              size="small"
              class="addpic"
              @click="getOrderNumber(2, '')"
              v-if="orderStatus == 0"
              >上传</el-button
            >
          </span>
        </el-upload>
      </div>
      <div
        class="upload_list"
        v-loading="loading2"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :style="{ 'min-height': height2 + 'px' }"
      >
        <ul class="clearfix">
          <li v-for="(item, index) in fileListHu" :key="item.id">
            <div class="img">
              <el-image
                style="width: 160px; height: 90px"
                :src="item.accessoryShrinkName || item.accessoryUrl"
                fit="cover"
                :lazy="true"
              >
              </el-image>
            </div>
            <p class="name">{{ item.accessoryShowName }}</p>
            <p class="ztc">{{ item.accessorySize }} MB</p>
            <p class="ztc">
              {{ item.accessoryShowName }}由{{ item.upName }}上传
            </p>
            <div class="btn">
              <el-button type="text" @click="reviewPic(item.accessoryUrl)"
                >查看</el-button
              >
              <span>
                <el-popconfirm
                  title="确定删除此数据吗？"
                  @onConfirm="deleteData(item.id, index, fileListHu, 2, '')"
                  v-if="orderStatus == 0"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    size="small"
                    class="deteBtnText"
                    v-if="orderStatus == 0"
                    >删除</el-button
                  >
                </el-popconfirm>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--上传婚姻证明-->
    <div class="uploadDiv">
      <div class="title_div">
        <span>上传婚姻证明</span>
        <el-upload
          class="upload-demo"
          action=""
          :multiple="true"
          :http-request="uploadImg"
          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
        >
          <span>
            <el-button
              size="small"
              class="addpic"
              @click="getOrderNumber(3, '')"
              v-if="orderStatus == 0"
              >上传</el-button
            >
          </span>
        </el-upload>
      </div>
      <div
        class="upload_list"
        v-loading="loading3"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :style="{ 'min-height': height3 + 'px' }"
      >
        <ul class="clearfix">
          <li v-for="(item, index) in fileListMarry" :key="item.id">
            <div class="img">
              <el-image
                style="width: 160px; height: 90px"
                :src="item.accessoryShrinkName || item.accessoryUrl"
                fit="cover"
                :lazy="true"
              >
              </el-image>
            </div>
            <p class="name">{{ item.accessoryShowName }}</p>
            <p class="ztc">{{ item.accessorySize }} MB</p>
            <p class="ztc">
              {{ item.accessoryShowName }}由{{ item.upName }}上传
            </p>
            <div class="btn">
              <el-button type="text" @click="reviewPic(item.accessoryUrl)"
                >查看</el-button
              >
              <span>
                <el-popconfirm
                  title="确定删除此数据吗？"
                  @onConfirm="deleteData(item.id, index, fileListMarry, 3, '')"
                  v-if="orderStatus == 0"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    size="small"
                    class="deteBtnText"
                    v-if="orderStatus == 0"
                    >删除</el-button
                  >
                </el-popconfirm>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!--上传工作证明-->
    <div class="uploadDiv">
      <div class="title_div">
        <span>上传工作证明</span>
        <el-upload
          class="upload-demo"
          action=""
          :multiple="true"
          :http-request="uploadImg"
          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
        >
          <span>
            <el-button
              size="small"
              class="addpic"
              @click="getOrderNumber(4, '')"
              v-if="orderStatus == 0"
              >上传</el-button
            >
          </span>
        </el-upload>
      </div>
      <div
        class="upload_list"
        v-loading="loading4"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :style="{ 'min-height': height4 + 'px' }"
      >
        <ul class="clearfix">
          <li v-for="(item, index) in fileListWork" :key="item.id">
            <div class="img">
              <el-image
                style="width: 160px; height: 90px"
                :src="item.accessoryShrinkName || item.accessoryUrl"
                fit="cover"
                :lazy="true"
              >
              </el-image>
            </div>
            <p class="name">{{ item.accessoryShowName }}</p>
            <p class="ztc">{{ item.accessorySize }} MB</p>
            <p class="ztc">
              {{ item.accessoryShowName }}由{{ item.upName }}上传
            </p>
            <div class="btn">
              <el-button type="text" @click="reviewPic(item.accessoryUrl)"
                >查看</el-button
              >
              <span>
                <el-popconfirm
                  title="确定删除此数据吗？"
                  @onConfirm="deleteData(item.id, index, fileListWork, 4, '')"
                  v-if="orderStatus == 0"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    size="small"
                    class="deteBtnText"
                    v-if="orderStatus == 0"
                    >删除</el-button
                  >
                </el-popconfirm>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!--上传房产证明-->
    <div class="uploadDiv">
      <div class="title_div">
        <span>上传房产证明</span>
        <el-upload
          class="upload-demo"
          action=""
          :multiple="true"
          :http-request="uploadImg"
          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
        >
          <span>
            <el-button
              size="small"
              class="addpic"
              @click="getOrderNumber(5, '')"
              v-if="orderStatus == 0"
              >上传</el-button
            >
          </span>
        </el-upload>
      </div>
      <div
        class="upload_list"
        v-loading="loading5"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :style="{ 'min-height': height5 + 'px' }"
      >
        <ul class="clearfix">
          <li v-for="(item, index) in fileListHouse" :key="item.id">
            <div class="img">
              <el-image
                style="width: 160px; height: 90px"
                :src="item.accessoryShrinkName || item.accessoryUrl"
                fit="cover"
                :lazy="true"
              >
              </el-image>
            </div>
            <p class="name">{{ item.accessoryShowName }}</p>
            <p class="ztc">{{ item.accessorySize }} MB</p>
            <p class="ztc">
              {{ item.accessoryShowName }}由{{ item.upName }}上传
            </p>
            <div class="btn">
              <el-button type="text" @click="reviewPic(item.accessoryUrl)"
                >查看</el-button
              >
              <span>
                <el-popconfirm
                  title="确定删除此数据吗？"
                  @onConfirm="deleteData(item.id, index, fileListHouse, 5, '')"
                  v-if="orderStatus == 0"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    size="small"
                    class="deteBtnText"
                    v-if="orderStatus == 0"
                    >删除</el-button
                  >
                </el-popconfirm>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!--上传征信证明-->
    <div class="uploadDiv">
      <div class="title_div">
        <span>上传征信证明</span>
        <el-upload
          class="upload-demo"
          action=""
          :multiple="true"
          :http-request="uploadImg"
          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
        >
          <span>
            <el-button
              size="small"
              class="addpic"
              @click="getOrderNumber(6, '')"
              v-if="orderStatus == 0"
              >上传</el-button
            >
          </span>
        </el-upload>
      </div>
      <div
        class="upload_list"
        v-loading="loading6"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :style="{ 'min-height': height6 + 'px' }"
      >
        <ul class="clearfix">
          <li v-for="(item, index) in fileListZhen" :key="item.id">
            <div class="img">
              <el-image
                style="width: 160px; height: 90px"
                :src="item.accessoryShrinkName || item.accessoryUrl"
                fit="cover"
                :lazy="true"
              >
              </el-image>
            </div>
            <p class="name">{{ item.accessoryShowName }}</p>
            <p class="ztc">{{ item.accessorySize }} MB</p>
            <p class="ztc">
              {{ item.accessoryShowName }}由{{ item.upName }}上传
            </p>
            <div class="btn">
              <el-button type="text" @click="reviewPic(item.accessoryUrl)"
                >查看</el-button
              >
              <span>
                <el-popconfirm
                  title="确定删除此数据吗？"
                  @onConfirm="deleteData(item.id, index, fileListZhen, 6, '')"
                  v-if="orderStatus == 0"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    size="small"
                    class="deteBtnText"
                    v-if="orderStatus == 0"
                    >删除</el-button
                  >
                </el-popconfirm>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!--上传其他证明-->
    <div class="uploadDiv">
      <div class="title_div">
        <span>上传其他证明</span>
        <el-upload
          class="upload-demo"
          action=""
          :multiple="true"
          :http-request="uploadImg"
          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
        >
          <span>
            <el-button
              size="small"
              class="addpic"
              @click="getOrderNumber(7, '')"
              v-if="orderStatus == 0"
              >上传</el-button
            >
          </span>
        </el-upload>
      </div>
      <div
        class="upload_list"
        v-loading="loading7"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :style="{ 'min-height': height7 + 'px' }"
      >
        <ul class="clearfix">
          <li v-for="(item, index) in fileListOther" :key="item.id">
            <div class="img">
              <el-image
                style="width: 160px; height: 90px"
                :src="item.accessoryShrinkName || item.accessoryUrl"
                fit="cover"
                :lazy="true"
              >
              </el-image>
            </div>
            <p class="name">{{ item.accessoryShowName }}</p>
            <p class="ztc">{{ item.accessorySize }} MB</p>
            <p class="ztc">
              {{ item.accessoryShowName }}由{{ item.upName }}上传
            </p>
            <div class="btn">
              <el-button type="text" @click="reviewPic(item.accessoryUrl)"
                >查看</el-button
              >
              <span>
                <el-popconfirm
                  title="确定删除此数据吗？"
                  @onConfirm="deleteData(item.id, index, fileListOther, 7, '')"
                  v-if="orderStatus == 0"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    size="small"
                    class="deteBtnText"
                    v-if="orderStatus == 0"
                    >删除</el-button
                  >
                </el-popconfirm>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="580px"
        class="diaBox"
      >
        <el-image
          :src="src"
          fit="cover"
          :preview-src-list="previewList"
          class="previewImg"
        ></el-image>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getOrderOne,
  getOrderNumber,
  getOssChan,
  addOssImg,
  delOssPic
} from "../../../src/assets/js/api";
export default {
  name: "Upload",
  props: {
    isNew: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      orderStatus: "",
      orderNumber: null,
      productId: null,
      previewList: [],

      fileList: [],
      fileListBack: [],
      fileListHu: [],
      fileListMarry: [],
      fileListWork: [],
      fileListHouse: [],
      fileListZhen: [],
      fileListOther: [],

      loading1: false,
      loading0: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      loading7: false,
      height1: "0",
      height0: "0",
      height2: "0",
      height3: "0",
      height4: "0",
      height5: "0",
      height6: "0",
      height7: "0",
      src: "",
      type: 1,
      faceBack: "face",
      num0: 0,
      num1: 1,
      num2: 0,
      num3: 0,
      num4: 0,
      num5: 0,
      num6: 0,
      num7: 0
    };
  },
  created() {
    //产品ID
    this.productId = parseInt(sessionStorage.getItem("productId"));
    //获取token
    //let token = localStorage.getItem("token");
    //获取订单号
    if (this.isNew == false) {
      this.getOrderNum();
      this.findProductUrl(this.orderNumber);
    }
  },
  methods: {
    proFileExceed() {
      this.$message.error("只允许上传一个文件");
    },
    //上传图片
    uploadImg(params) {
      let that = this;
      let type = this.type;
      if (this.faceBack == "face") {
        this.loading1 = true;
        this.height1 = 150;
      } else if (this.faceBack == "back") {
        this.loading0 = true;
        this.height0 = 150;
      } else {
        this[`num${this.type}`]++;
        this[`loading${this.type}`] = true;
        this[`height${this.type}`] = 150;
      }
      getOssChan().then(res => {
        let imgName = params.file.name;
        let wz = imgName.split(".");
        let imgType = "." + wz[wz.length - 1];
        //创建文件
        let formData = new FormData();
        //表头信息
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        //上传对象
        let dataOss = res.data;
        let ossUrl = dataOss.host;
        formData.append("policy", dataOss.policy);
        formData.append("key", dataOss.dir + dataOss.fileName + imgType);
        formData.append("OSSAccessKeyId", dataOss.accessid);
        formData.append("Signature", dataOss.signature);
        formData.append("success_action_status", 200);
        formData.append("fileName", dataOss.fileName);
        formData.append("file", params.file);
        //传文件成功后需要的参数
        let fileForm = {
          accessoryShowName: imgName,
          accessorySaveName: dataOss.fileName,
          accessorySize: params.file.size,
          accessoryType: this.type,
          orderNumber: this.orderNumber,
          faceBack: this.faceBack
        };
        this.axios
          .post(ossUrl, formData, config)
          .then(res => {
            if (res.status == 200) {
              that.addImg(fileForm, type);
            }
          })
          .catch(() => {
            if (that.faceBack == "face") {
              that.loading1 = false;
              that.height1 = 0;
            } else if (that.faceBack == "back") {
              that.loading0 = false;
              that.height0 = 0;
            } else {
              that[`loading${type}`] = false;
              that[`height${type}`] = 0;
            }
          });
      });
    },
    //上传图片
    addImg(params, type) {
      let that = this;
      addOssImg(params)
        .then(res => {
          let resData = res.data;
          switch (resData.accessoryType) {
            case 2:
              this.fileListHu.push(resData);
              break;
            case 3:
              this.fileListMarry.push(resData);
              break;
            case 4:
              this.fileListWork.push(resData);
              break;
            case 5:
              this.fileListHouse.push(resData);
              break;
            case 6:
              this.fileListZhen.push(resData);
              break;
            case 7:
              this.fileListOther.push(resData);
              break;
            default:
              if (resData.faceBack == "face") {
                that.fileList.push(resData);
              } else {
                that.fileListBack.push(resData);
              }
              break;
          }
          this[`num${type}`]--;
          if (that.faceBack == "face") {
            that.loading1 = false;
            that.height1 = 0;
          } else if (that.faceBack == "back") {
            that.loading0 = false;
            that.height0 = 0;
          } else {
            if (this[`num${type}`] == 0) {
              that[`loading${type}`] = false;
              that[`height${type}`] = 0;
            }
          }
        })
        .catch(() => {
          if (that.faceBack == "face") {
            that.loading1 = false;
            that.height1 = 0;
          } else if (that.faceBack == "back") {
            that.loading0 = false;
            that.height0 = 0;
          } else {
            that[`loading${type}`] = false;
            that[`height${type}`] = 0;
          }
        });
    },
    //第一次获取订单号
    getOrderNumber(type, faceType) {
      this.type = type;
      this.faceBack = faceType;
      if (!this.orderNumber) {
        getOrderNumber(this.productId).then(res => {
          this.orderNumber = res.data;
        });
      }
    },
    //根据订单查询订单状态
    findProductUrl(orderNumber) {
      getOrderOne(orderNumber).then(res => {
        this.orderStatus = res.data.orderStatus;
        let img = res.data.accessoryVo;
        this.photoArch(img);
      });
    },
    //相片分类
    photoArch(obj) {
      //身份证正面
      obj.forEach(item => {
        if (item.accessoryType == 1 && item.faceBack == "face") {
          this.fileList.push(item);
        }
        if (item.accessoryType == 1 && item.faceBack == "back") {
          this.fileListBack.push(item);
        }
        if (item.accessoryType == 2) {
          this.fileListHu.push(item);
        }
        if (item.accessoryType == 3) {
          this.fileListMarry.push(item);
        }
        if (item.accessoryType == 4) {
          this.fileListWork.push(item);
        }
        if (item.accessoryType == 5) {
          this.fileListHouse.push(item);
        }
        if (item.accessoryType == 6) {
          this.fileListZhen.push(item);
        }
        if (item.accessoryType == 7) {
          this.fileListOther.push(item);
        }
      });
    },
    //判断获取orderNumber
    getOrderNum() {
      let orderNumber = this.$route.query.orderNumber;
      if (orderNumber) {
        this.orderNumber = orderNumber;
      } else {
        this.orderNumber = sessionStorage.getItem("orderNumber");
      }
    },
    //预览图片
    reviewPic(obj) {
      this.dialogVisible = true;
      this.src = obj;
      this.previewList[0] = obj;
    },
    //删除图片
    deleteData(id, index, file, type, faceType) {
      delOssPic(id).then(res => {
        this.$message({
          message: res.message,
          type: "success"
        });
        const removeItem = (items, i) =>
          items.slice(0, i).concat(items.slice(i + 1, items.length));
        switch (type) {
          case 2:
            this.fileListHu = removeItem(file, index);
            break;
          case 3:
            this.fileListMarry = removeItem(file, index);
            break;
          case 4:
            this.fileListWork = removeItem(file, index);
            break;
          case 5:
            this.fileListHouse = removeItem(file, index);
            break;
          case 6:
            this.fileListZhen = removeItem(file, index);
            break;
          case 7:
            this.fileListOther = removeItem(file, index);
            break;
          default:
            if (faceType == "face") {
              this.fileList = removeItem(file, index);
            } else {
              this.fileListBack = removeItem(file, index);
            }
            break;
        }
      });
    }
  }
};
</script>

<style scoped>
.diaBox {
  min-width: 580px;
}
.previewImg {
  height: 500px;
}
::v-deep .el-upload-list {
  width: 100%;
  display: none;
}
.title_div {
  height: 56px;
  border-bottom: 1px solid #ededed;
  text-align: left;
  line-height: 56px;
}
.title_div span {
  height: 15px;
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.upload-demo {
  float: right;
  display: inline-block;
}
.addpic {
  color: #fff !important;
  background: #ffa32f !important;
  border: 1px solid #ffa32f !important;
}
.addpic:hover {
  background: #ffa32f;
  border: 1px solid #ffa32f;
  color: #fff;
}
.uploadDiv {
  margin-top: 10px;
}
.upload_list ul {
  margin-right: -12px;
}
.upload_list li {
  width: 49%;
  float: left;
  margin-top: 20px;
  margin-right: 20px;
  height: 130px;
  border: 1px solid rgba(237, 237, 237, 1);
  border-radius: 8px;
  padding: 20px;
  text-align: left;
  position: relative;
  box-sizing: border-box;
}
.upload_list li:nth-child(even) {
  margin-right: unset;
}
.upload_list .img {
  float: left;
  width: 160px;
  height: 90px;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 20px;
}
.upload_list .btn {
  position: absolute;
  top: 20px;
  right: 20px;
}
.upload_list .name {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 14px;
  margin-top: 5px;
  max-height: 20px;
  overflow: hidden;
  max-width: 66%;
}
.upload_list .ztc {
  color: #999999;
}
</style>
